<template>
  <div class="work-container">
    <div class="job-list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="load"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          class="job-item"
          @click="gotoDetail(item)"
        >
          <div class="job-header">
            <div class="tit"><b>业务类型：</b>计件报工</div>
            <div class="pull-r">
              <van-icon
                v-if="currentUser === item.rworkUser"
                name="edit"
                size="20"
                color="#1989fa"
                @click.stop="gotoEdit(item.rworkId)"
              />
            </div>
          </div>
          <div class="job-body">
            <dl>
              <dt>模块：</dt>
              <dd>{{item.slModule.moduleName}}</dd>
            </dl>
            <dl>
              <dt>车间：</dt>
              <dd>{{item.slWorkshop.workshopName}}</dd>
            </dl>
            <dl>
              <dt>大工序：</dt>
              <dd>{{item.slGprocess.gprocessName}}</dd>
            </dl>
            <dl>
              <dt>小工序：</dt>
              <dd>{{item.slProcess.processName}}</dd>
            </dl>
            <dl>
              <dt>开始时间：</dt>
              <dd>{{item.rworkStart}}</dd>
            </dl>
            <dl>
              <dt>结束时间：</dt>
              <dd>{{item.rworkEnd}}</dd>
            </dl>
          </div>
        </div>
        <van-empty
          v-if="!list.length"
          description="暂无报工数据"
        />
      </van-list>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";

// import { listRwork, getRwork, delRwork, addRwork, updateRwork,listHRwork } from "@/api/sl/rwork";
import { listHRwork } from "@/api/sl/rwork";

export default {
  name: "h5Job",
  components: {
    [Notify.Component.name]: Notify.Component,
  },
  data() {
    return {
      // 查询参数
      queryParams01: {
        pageNum: 1,
        pageSize: 9999,
        rfworkId: 0,
      },
      list: [],
      total: 0,
      finished: false,
      loading: false,
      currentUser: undefined
    };
  },
  computed: {},
  created() {
    //获取当前报工人信息
    // this.getRworkUserBase(this.$store.state.user.name);
    this.currentUser = this.$store.state.user.name;
    this.queryParams01.rfworkId = this.$route.query.rfworkId;
    this.load();
  },
  methods: {
    handleClick() {
      this.list = [];
      this.queryParams01.pageNum = 1;
      this.total = 0;
      this.finished = false;
      this.load();
    },
    load() {
      console.log(this.activeName);
      this.loading = true;
      this.listHRwork();
    },
    // 跳转详情
    // http://localhost:1024/dev-api/sl/rwork/9
    gotoDetail(item) {
      console.log('gotoDetail rworkId:' + item.rworkId)
      this.$router.push({ path: '/h5/rfwork-jijian-info?rworkId=' + item.rworkId })
    },
    /** 查询报工项列表 */
    listHRwork() {
      this.loading = true;
      if (!this.finished) {
        console.log("----------this.queryParams01")
        console.log(this.queryParams01)
        listHRwork(this.queryParams01).then((response) => {
          console.log(response)
          if (response.code === 200) {
            this.list = [...this.list, ...response.rows];
            this.total = response.total;
            this.loading = false;
            if (this.queryParams01.pageNum * this.queryParams01.pageSize < this.total) {
              this.finished = false;
              this.queryParams01.pageNum += 1;
            } else {
              this.finished = true;
            }
          } else {
            Notify({ type: "danger", message: "出错了" });
          }
        });
      }
    },
    gotoEdit(id) {
      this.$router.push({
        path: '/h5/rwork-edit-single', query: {
          rworkId: id,
          from: 'history'
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.job-list {
  padding: 15px 15px 80px;
  .job-item {
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
    & + .job-item {
      margin-top: 15px;
    }
    .job-header {
      display: flex;
      margin-bottom: 10px;
      font-size: 16px;
      .tit {
        flex: 1;
      }
      .pull-r {
        i {
          margin-left: 10px;
        }
      }
    }
    .job-body {
      padding: 10px;
      border-radius: 5px;
      background-color: #f3f5f7;
      dl {
        display: flex;
        margin: 0;
        font-size: 14px;
        & + dl {
          margin-top: 2px;
        }
        dt {
          width: 80px;
          text-align: justify;
          color: #999;
        }
        dd {
          margin-left: 0;
          flex: 1;
          color: #333;
        }
      }
    }
  }
}
@media (max-width: 550px) {
}
</style>
